<template>
    <div>
      <el-drawer title="新建商机" :append-to-body="true" size="1100px" :close-on-press-escape="false" :visible.sync="dialogData.show" direction="rtl" :before-close="handleClose" :wrapperClosable="false">
        <el-row style="width:1120px;padding-bottom:150px;height:100%;overflow-y:auto">
          <el-col :span="18">
             <el-form :model="parames" status-icon :rules="rules" label-position="left" ref="parames" label-width="94px" class="addForm">
                <el-row style="padding: 0 40px">
                  <el-col :span="24">
                    <p class="formtitle">基本信息</p>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="联系人:" prop="name">
                        <el-input size="small" v-model="parames.name"></el-input>
                      </el-form-item>
                      <el-form-item label="联系方式:" prop="phone">
                        <el-row>
                          <el-col :span="8">
                            <el-select size="small" v-model="parames.phoneTyPe">
                              <el-option label="手机" value="telphone"></el-option>
                              <el-option label="电话" value="phone"></el-option>
                              <el-option label="邮箱" value="email"></el-option>
                              <el-option label="QQ" value="qq"></el-option>
                              <el-option label="微信" value="chat"></el-option>
                            </el-select>
                          </el-col>
                          <el-col :span="16">
                            <el-input size="small" v-model="parames.phone"></el-input>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="客户名称:" prop="name">
                        <el-input size="small" v-model="parames.name"></el-input>
                      </el-form-item>
                      <el-form-item label="商机来源:" prop="phone">
                        <el-row>
                          <el-col :span="8">
                            <el-select size="small" v-model="parames.phoneTyPe" placeholder="请选择">
                              <el-option label="老客户" value="telphone"></el-option>
                              <el-option label="同事" value="phone"></el-option>
                              <el-option label="渠道" value="email"></el-option>
                            </el-select>
                          </el-col>
                          <el-col :span="16">
                            <el-select style="width:100%" size="small" v-model="parames.phoneTyPe" placeholder="请选择">
                              <el-option label="老客户" value="telphone"></el-option>
                              <el-option label="同事" value="phone"></el-option>
                              <el-option label="渠道" value="email"></el-option>
                            </el-select>
                          </el-col>
                        </el-row>
                      </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="添加标签:">
                      <el-row>
                        <el-col :span="6">
                          <el-select size="small" v-model="parames.phoneTyPe" placeholder="请选择优先级">
                              <el-option label="普通" value="telphone"></el-option>
                              <el-option label="重要" value="phone"></el-option>
                              <el-option label="紧急" value="email"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="6">
                          <el-select size="small" v-model="parames.phoneTyPe" placeholder="请选择客户喜好">
                              <el-option label="办事高效" value="telphone"></el-option>
                              <el-option label="服务优质" value="phone"></el-option>
                              <el-option label="价格实惠" value="email"></el-option>
                              <el-option label="其他" value="email"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                          <el-tag
                            :key="tag"
                            v-for="tag in dynamicTags"
                            closable
                            :disable-transitions="false"
                            @close="handleCloseTag(tag)">
                            {{tag}}
                          </el-tag>
                          <el-input
                            style="width: 100px"
                            v-if="inputVisible"
                            v-model="inputValue"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm"
                            @blur="handleInputConfirm"
                          >
                          </el-input>
                          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="推荐方案:" prop="name">
                      <el-button size="small">开始创建</el-button>
                    </el-form-item>
                    <el-form-item label="推荐方案:" prop="name">
                      <el-input size="small" type="textarea" placeholder="请输入需求概述"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <p style="margin-top: 20px" class="formtitle">推荐产品</p>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="快速添加" prop="name">
                      <el-tag type="info">内资注册</el-tag>
                      <el-tag type="info">内资注册</el-tag>
                      <el-tag type="info">内资注册</el-tag>
                    </el-form-item>
                    <el-table
                      :data="tableData"
                      style="width: 100%">
                      <el-table-column
                        prop="date"
                        label="序号"
                        width="50">
                      </el-table-column>
                      <el-table-column
                        prop="name"
                        label="产品名称"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="数量">
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="单位">
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="赠送数量">
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="总额(元)">
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="操作">
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
            </el-form>
          </el-col>
          <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
            <div class="form-team-box">
              <p class="formtitle">团队成员（1）人</p>
              <el-row>
                <el-col style="margin-bottom:10px">
                  <span class="team-icon" style="background: #409efe">李</span>
                  <span class="team-name">李四光</span>
                </el-col>
                <el-col>
                  <span class="team-icon" style="background: #409efe">李</span>
                  <span class="team-name">李四光</span>
                  <i class="el-icon-delete team-del"></i>
                </el-col>
              </el-row>
              <el-button type="text" style="margin-top:14px"  icon="el-icon-plus">添加新成员</el-button>
            </div>
          </el-col>
        </el-row>
        
        <div class="from-bottom-box">
          <el-button size="small" type="primary">保存</el-button>
          <el-button size="small" @click="handleClose">取消</el-button>
        </div>
      </el-drawer>
    </div>
</template>

<script>
export default {
    props: ['dialogData'],
    data() {
        return {
          parames: {
            name: '',
            phoneTpye: 'telphone',
            phone: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
            color2: '#f00'
          },
          rules: {
            name: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            phone: [{ required: true, message: '请输入手机号码', trigger: ['change','blur' ]}],
            region: [
              { required: true, message: '请选择活动区域', trigger: 'change' }
            ],
            date1: [
              { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            date2: [
              { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
            ],
            type: [
              { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
            ],
            resource: [
              { required: true, message: '请选择活动资源', trigger: 'change' }
            ],
            desc: [
              { required: true, message: '请填写活动形式', trigger: 'blur' }
            ]
          },
          dynamicTags: ['标签一', '标签二', '标签三'],
          inputVisible: false,
          inputValue: '',
          tableData: []
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
      handleClose () { //关闭弹窗
        this.dialogData.show = false
      },
      handleCloseTag(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
    
    },
    components: {

    },
    watch: {

    },
};
</script>

<style scoped>

</style>
